<template>
	<a-modal title="选择物料" :width="1500" :maskClosable="false" :visible="visible" :confirmLoading="confirmLoading"
		:footer="null" @cancel="handleCancel">

		<a-spin :spinning="confirmLoading">
			<h2 style="font-weight: bold;">
				{{ typeList.find(item => item.value==materialType) ? typeList.find(item => item.value==materialType).label : '' }}
			</h2>
			<div class="table-page-search-wrapper">
				<a-form layout="inline">
					<a-row :gutter="48">

						<a-col :md="7" :sm="24">
							<a-form-item label="名称">
								<a-input v-model="queryParam.materialName" placeholder="请输入名称" />
							</a-form-item>
						</a-col>

						<a-col :md="7" :sm="24">
							<a-form-item label="料号">
								<a-input v-model="queryParam.materialCode" placeholder="请输入料号" />
							</a-form-item>
						</a-col>
						<a-col :md="6" :sm="24">
							<a-form-item label="领用方">
								<a-select placeholder="全部" v-model="queryParam.classGroupId">
									<a-select-option :values="item.classGroupId" v-for="item in teamList" :key="item.classGroupId">
										{{ item.name }}
									</a-select-option>
								</a-select>
							</a-form-item>
						</a-col>
						<a-col :md="4" :sm="24">
							<span class="table-page-search-submitButtons"
								:style="{ float: 'right', overflow: 'hidden' } || {}">
								<a-button type="primary" @click="$refs.table.refresh(true)">查询</a-button>
								<a-button style="margin-left: 8px"
									@click="() => {  queryParam = { };$refs.table.refresh(true)  } ">重置</a-button>
							</span>
						</a-col>

					</a-row>
				</a-form>
			</div>
			<!-- 22--{{ selectedList }} -->
			<s-table ref="table" size="default" :columns="columns" :data="loadData" :alert="true">
				<span slot="action" slot-scope="text, record">
					<a 
						@click="handleSelect(record)" 
						v-if="selectedList.findIndex(item=>item == record.materialId)==-1"
					>选择</a>
					<!-- <a-tag 
						v-else-if="selectedList.length>0 && selectedList[0].orgIdSupplier!=record.orgIdSupplier"
						style="cursor: no-drop;"
					>非同一供应商</a-tag> -->
					<a-tag color="green" v-else style="cursor: no-drop;">该物料已选</a-tag>

				</span>
				<!-- <span slot="image" slot-scope="text">
					<image-preview :images="text" />
				</span> -->
				<span slot="image" slot-scope="text,record">
				<image-preview1 :images="text" :imageUrl="record.imageUrl" />
			</span>
			</s-table>
		</a-spin>
	</a-modal>
</template>
	
<script>
import { STable } from '@/components'
// import {del, page} from '@/api/modular/main/emsmaterialpool/emsMaterialPoolManage'
import {del, page} from '@/api/modular/main/emsmaterial/emsMaterialManage'

import { page as teamPage } from '@/api/modular/main/classGroup/classGroup'

export default {
	components: {
		STable,
	},
	props: {
		typeList: {
			type: Array,
			default: () => []
		},
	},
	data() {
		return {
			queryParam:{},  //顶部搜索
			selectedList:[],
			materialType:'',
			poolType:'',
			labelCol: {
				xs: { span: 24 },
				sm: { span: 5 }
			},
			wrapperCol: {
				xs: { span: 24 },
				sm: { span: 15 }
			},
			visible: false,
			confirmLoading: false,
			form: this.$form.createForm(this),
			// 加载数据方法 必须为 Promise 对象
      loadData: parameter => {
				let query = {
					...parameter, 
					...this.queryParam, 
					materialType: this.materialType || '',
					// poolType: this.poolType || '',
				}
        return page(query).then((res) => {
          return res.data
        })
      },
			columns: [       // 表头
				{
					title: '序号', width: '80px',
					dataIndex: 'index',
					key: 'index',
					align: 'center',
					customRender: (text, record, index) => `${index + 1}`,
				},
				{
					title: '料号',
					dataIndex: 'materialCode'
				},
				{
					title: '名称',
					dataIndex: 'materialName'
				},
				{
					title: '规格',
					dataIndex: 'materialModelNumber'
				},
				{
					title: '图片',
					dataIndex: 'image',
					// customRender: (text, record, index) => this.$util.createFcImage(this.$createElement, text)
					scopedSlots: { customRender: 'image' }
				},
				{
					title: '库存数量',
					dataIndex: 'inventoryNumber'
				},
				{
					title: '预警值',
					dataIndex: 'inventoryWarningValue'
				},
				{
					title: '领用方',
					dataIndex: 'classGroupName'
				},
				{
					title: '归属公司',
					dataIndex: 'orgIdCompanyName',
					// customRender: (text, record, index) => `${this.findOrg(text).name}`,
					ellipsis: false,
				},
				{
					title: '归属供应商',
					dataIndex: 'orgIdSupplierName',
					// customRender: (text, record, index) => `${this.findOrg(text).name}`,
					ellipsis: false,
				},
				{
					title: '操作',
					dataIndex: 'action',
					width: '100px',
					scopedSlots: { customRender: 'action' }
				}
			],
			poolType: "",
			teamList: [],
		}
	},
	methods: {
		init(selectedList = [], materialType, poolType) {
			this.selectedList = [...selectedList]
			this.materialType = materialType
			this.poolType = poolType
			this.visible = true
			setTimeout(() => {
				this.$refs.table.refresh()
			}, 100)
			this.getTeamList();
		},
			//获取领用方
			getTeamList() {
			teamPage({
				pageSize: -1,
				status: 0
			}).then(res => {
				this.teamList = res.data.rows;
			})
		},
		// 选择物料
		handleSelect(row) {
			// let obj = {
			// 	materialId: row.materialId,
			// 	materialPoolId: row.materialPoolId,
			// 	number: row.number || undefined,
			// 	remark: row.remark || '',
			// }
			this.$emit('selected', row)
			this.visible = false
		},
		handleCancel() {
			this.form.resetFields()
			this.visible = false
			this.queryParam = {}
		},
	}
}
</script>
	